<template>
  <div class="home">
    <el-container>
      <div style="width: 1200px;margin: 0 auto;">
        <el-header style="height: 100px;background-color: skyblue;">
          <el-row :gutter="10">
            <el-col :span="2">
              <img src="https://t9.baidu.com/it/u=1099773072,3876012635&fm=193" width="100%">
            </el-col>
            <el-col :span="18">
              <el-menu background-color="#ffffff" mode="horizontal" @select="handleSelect"
                       style="margin-top: 10px">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">电影</el-menu-item>
                <el-menu-item index="3">影院</el-menu-item>
                <el-menu-item index="4">演出</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="2">
              <el-popover
                          placement="top-start"
                          width="200"
                          trigger="hover">
                <i style="font-size: 30px;" slot="reference">
                  <div style="margin-top: 20px">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                  </div>
                </i>
                <el-button type="info" @click="reg()">注册</el-button>
                <el-button type="warning" @click="login()">登录</el-button>
              </el-popover>
            </el-col>
          </el-row>
        </el-header>
      </div>

      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>
        <div style="background-color: #2c3e50;width: 1200px;text-align: center;
        margin: 0 auto;color: white;font-size: 8px;height: 300px;padding: 30px 0;">
          <p>关于猫眼 : <a href="" style="text-decoration: none;color: red">关于我们</a> |
            <a href="" style="text-decoration: none;color: red">董事会成员</a> |
            <a href="" style="text-decoration: none;color: red">投资者关系</a>&nbsp
            友情链接 : <a href="" style="text-decoration: none;color: red">美团网</a> |
            <a href="" style="text-decoration: none;color: red">格瓦拉</a> |
            <a href="" style="text-decoration: none;color: red">美团下载</a> | <a>欢喜首映</a></p>
          <p>商务合作邮箱：v@maoyan.com 客服电话：10105335 违法和不良信息/涉未成年人有害信息举报电话：4006018900</p>
          <p>用户举报/涉未成年人有害信息举报邮箱：tousujubao@meituan.com 舞弊线索举报邮箱：wubijubao@maoyan.com</p>
          <p>中华人民共和国增值电信业务经营许可证 京B2-20190350 | 营业性演出许可证 京演（机构）（2019）4094号</p>
          <p>广播电视节目制作经营许可证 （京）字第08478号 | 网络文化经营许可证 京网文（2022）1334-041号</p>
          <p>艺术品经营单位备案证明 京东艺（2022）0095号</p>
          <p>猫眼用户服务协议 | 猫眼平台交易规则总则 | 隐私政策</p>
          <p>京公网安备 11010102003232号 | 京ICP备16022489号-1</p>
          <p>北京猫眼文化传媒有限公司</p>
          <p>©2023 猫眼电影 www.maoyan.com</p>
          <img src="https://p0.meituan.net/moviemachine/e54374ccf134d1f7b2c5b075a74fca525326.png">&nbsp
          <img src="https://p1.meituan.net/moviemachine/805f605d5cf1b1a02a4e3a5e29df003b8376.png">&nbsp
          <img src="https://p0.meituan.net/scarlett/3cd2a9b7dc179531d20d27a5fd686e783787.png">
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>


export default {
  name: 'HomeView',
  methods: {
    reg() {
      this.$router.push('/reg')
    },
    login(){
      this.$router.push('/login')
    }
  },
}
</script>
